<template>
  <div>
    <van-cell-group>
      <van-field v-model="username" clearable label="用户名" placeholder="请输入用户名" />
      <van-field v-model="idCardNo" clearable maxlength="6" label="身份证后六位" placeholder="请输入身份证后六位" />
      <van-field v-model="telnum" clearable maxlength="4" label="手机号后四位" placeholder="请输入手机号后四位" />
    </van-cell-group>
    <van-button style="margin:0.5rem 0" type="primary" size="large" @click="search">查询</van-button>
    <div class="items" v-for="(item,index) in list" :key="index">
      <div>
        <p>{{item.type}}</p>
        <span>{{item.createTime}}</span>
      </div>
      <p class="use">{{item.times?item.times:item.num}}{{item.times?'次':'分'}}</p>
    </div>
  </div>
</template>
<script>
import { Toast, Field, CellGroup, Button } from 'vant';
export default {
  components: {
    'van-field': Field,
    'van-button': Button,
    'van-cell-group': CellGroup
  },
  data() {
    return {
      telnum: '',
      username: '',
      idCardNo: '',
      list: []
    };
  },
  methods: {
    search() {
      if (this.username.length <= 0) {
        Toast('请输入正确的用户名');
      } else {
        this.$http
          .post('/upload/queryUserCoin', {
            username: this.username,
            idCardNo: this.idCardNo,
            telphone: this.telnum
          })
          .then(res => {
            console.log(res);
            if (res.data.code === '0') {
              this.list = res.data.object;
            } else {
              Toast(res.data.message);
            }
          });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.items {
  width: 750px;
  height: 140px;
  background-color: #ffffff;
  border-bottom: 1px solid #ebebeb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px;
  div {
    p {
      font-size: 32px;
      color: #080808;
    }
    span {
      font-size: 26px;
      color: #8f8f8f;
    }
  }
  .use {
    font-size: 40px;
    color: #fc0202;
  }
  .get {
    font-size: 40px;
    color: #28b46a;
  }
}
</style>